<script setup lang="ts">
import {reactive, ref, watchEffect} from "vue";
import type {ComponentSize, FormInstance, FormRules} from "element-plus";

const prpos = defineProps(['lookOrderData', 'dialogVisible', 'or', 'editOrderData'])

const emit = defineEmits(['close-mask', 'emit-form'])

//closeDialog
function closeDialog() {
  emit('close-mask', false)
}


const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

const ruleForm = ref({
  address: '',
  name: '',
  price: '',
  order: '',
  phone: '',
  state: '',
  data: '',
  overData: '',
  ps: '',
})

//监视传过来的值
watchEffect(() => {
  if (prpos.editOrderData) {
    ruleForm.value.name = prpos.editOrderData.name
    ruleForm.value.address = prpos.editOrderData.address
    ruleForm.value.price = prpos.editOrderData.price
    ruleForm.value.order = prpos.editOrderData.order
    ruleForm.value.phone = prpos.editOrderData.phone
    ruleForm.value.state = prpos.editOrderData.state
    ruleForm.value.data = prpos.editOrderData.data
    ruleForm.value.overData = prpos.editOrderData.overData
    ruleForm.value.ps = prpos.editOrderData.ps
  }
})


interface RuleForm {
  name: string
  state: string
  price: string
  order: string
  phone: string
  address: string
  ps: string
}

const rules = reactive<FormRules<RuleForm>>({
  name: [
    {required: true, message: '请输入你的密码', trigger: 'blur'},
    {min: 3, max: 5, message: '长度必须在3到5之间', trigger: 'blur'},
  ],
  price: [
    {required: true, message: '请输入你的密码', trigger: 'blur'},
    {min: 3, max: 5, message: '长度必须在3到5之间', trigger: 'blur'},
  ],
  order: [
    {required: true, message: '请输入你的订单号', trigger: 'blur'},
    {min: 3, max: 15, message: '长度必须在3到15之间', trigger: 'blur'},
  ],
  ps: [
    {required: true, message: '请输入你的备注', trigger: 'blur'},
    {min: 1, max: 15, message: '长度必须在1到15之间', trigger: 'blur'},
  ],
  phone: [
    {required: true, message: '请输入你的电话', trigger: 'blur'},
    {min: 3, max: 15, message: '长度必须在3到15之间', trigger: 'blur'},
  ],
  address: [
    {required: true, message: '请输入你的地址', trigger: 'blur'},
    {min: 3, max: 30, message: '长度必须在3到15之间', trigger: 'blur'},
  ],
  state: [
    {
      required: true,
      message: '请选择一个',
      trigger: 'change',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      emit('emit-form', ruleForm.value)
      //关闭弹窗
      closeDialog()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  ruleForm.value.name = ''
  ruleForm.value.state = ''
  ruleForm.value.price = ''
  ruleForm.value.order = ''
  ruleForm.value.phone = ''
  ruleForm.value.address = ''
}

const options = Array.from({length: 10000}).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))


</script>

<template>
  <el-dialog :model-value="dialogVisible" :title="or==0?'订单详情':'订单编辑'" :center="true"
             :close-on-click-modal="false" :width="500" @close="closeDialog">
    <div class="order-look-and-edit-header" v-if="or==0">
      <div class="order-look-and-edit-list">
        <el-tag type="primary">地址</el-tag>
        {{ lookOrderData.address }}
      </div>

      <div class="order-look-and-edit-list">
        <el-tag type="primary">名字</el-tag>
        {{ lookOrderData.name }}
      </div>
      <div class="order-look-and-edit-list">
        <el-tag type="primary">价格</el-tag>
        {{ lookOrderData.price }}
      </div>
      <div class="order-look-and-edit-list">
        <el-tag type="primary">备注</el-tag>
        {{ lookOrderData.ps }}
      </div>
      <div class="order-look-and-edit-list">
        <el-tag type="primary">订单号</el-tag>
        {{ lookOrderData.order }}
      </div>
      <div class="order-look-and-edit-list">
        <el-tag type="primary">手机号</el-tag>
        {{ lookOrderData.phone }}
      </div>
      <div class="order-look-and-edit-list">
        <el-tag type="primary">订单状态</el-tag>
        {{ lookOrderData.state }}
      </div>
      <div class="order-look-and-edit-list">
        <el-tag type="primary">起始时间</el-tag>
        {{ lookOrderData.data }}
      </div>
      <div class="order-look-and-edit-list">
        <el-tag type="primary">结束时间</el-tag>
        {{ lookOrderData.overData }}
      </div>
    </div>
    <div class="order-look-and-edit-header" v-else>
      <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
      >
        <el-form-item label="名字" prop="name">
          <el-input v-model="ruleForm.name" size="large"/>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address" size="large"/>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="ruleForm.address" size="large"/>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="ruleForm.phone" size="large"/>
        </el-form-item>
        <el-form-item label="订单号" prop="order">
          <el-input v-model="ruleForm.order" size="large"/>
        </el-form-item>
        <el-form-item label="备注" prop="order">
          <el-input v-model="ruleForm.ps" size="large"/>
        </el-form-item>
        <el-form-item label="职位" prop="ground">
          <el-select v-model="ruleForm.state" placeholder="请选择一个状态" size="large">
            <el-option label="未受理" value="未受理"/>
            <el-option label="已受理" value="已受理"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            编辑
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<style scoped>
.order-look-and-edit-list {
  margin-bottom: 20px;
}
</style>